<template>
  <div>
    <!--    条件搜索      -->
    <el-form :inline="true" :model="queryOrderVo" class="demo-form-inline" style="float: left;display: block; margin-top:15px; margin-left:10px;">
      <el-form-item label="订单编号">
        <el-input v-model="queryOrderVo.orderNumber" placeholder="订单编号"></el-input>
      </el-form-item>
      <el-form-item label="时间">


          <div class="block">
            <span class="demonstration"></span>
            <el-date-picker
                v-model="queryOrderVo.orderDate"
                type="datetimerange"
                :picker-options="pickerOptions"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right">
            </el-date-picker>
          </div>

      </el-form-item>



      <!-- <el-input v-model="queryOrderVo.orderDate" placeholder="创建时间"></el-input>-->
<!--      <el-form-item label="时间"></el-form-item>-->

      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>


    <!--     按钮     -->
    <div style="float: right;display: block;width: 100%;text-align: left; ">
      <el-button style="margin-left:20px; margin-bottom:20px" type="danger" @click="deleteBatch" plain>取消选中订单
        <li class="el-icon-delete"></li>
      </el-button>

      <el-upload
          action="http://localhost:8081/svr/user/import"
          multiple
          :limit="3"
          :on-success="uploadSuccess"
          :show-file-list="false"
          style="display: none; margin-left: 20px;margin-right: 20px" >
        <el-button type="primary" plain>上传
          <li class="el-icon-upload2"></li>
        </el-button>
      </el-upload>

      <el-button style="display: none" type="warning" @click="exportFile" plain >下载
        <li class="el-icon-download"></li>
      </el-button>

    </div>

    <!--    内容     -->
    <el-table
        ref="multipleTable"
        :data="tableData"

        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column

          prop="number"
          label="订单号"
          width="100"
          align="center">
      </el-table-column>
      <!--订单状态-->
      <el-table-column
          label="订单状态"
          prop="status"
          align="center"
          :formatter="stateFormat">
        <template slot-scope="scope">
          <span>{{ stateFormat(scope.row) }}</span>
        </template>
      </el-table-column>
      <el-table-column
          prop="userName"
          label="用户名"
          width="100"
          align="center">
      </el-table-column>
      <el-table-column
          prop="phone"
          label="电话"
          width="200"
          align="center">
      </el-table-column>
      <el-table-column
          prop="address"
          label="地址"
          show-overflow-tooltip
          align="center">
      </el-table-column>
      <el-table-column
          prop="orderTime"
          label="下单时间"

          show-overflow-tooltip
          align="center">
      </el-table-column><!--:formatter="dateFormatter"-->
      <el-table-column label="操作"
                       align="center">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑
          </el-button>
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">取消订单
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--      分页栏-->
    <div style="margin-top: 30px;text-align: center">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="this.queryOrderVo.currentPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="this.queryOrderVo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="this.total">
      </el-pagination>
    </div>


    <el-dialog title="订单信息" :visible.sync="dialogFormVisible">
      <el-form :model="order">
        <el-form-item label="订单id" :label-width="formLabelWidth" hidden>
          <el-input v-model="order.id" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="订单号" :label-width="formLabelWidth">
          <el-input v-model="order.number" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth" style="text-align: left">
          <el-select v-model="order.status" placeholder="请选择订单状态" style="text-align: left">
            <el-option v-for="item in statusList" :value="item.id" :label="item.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="order.userName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话" :label-width="formLabelWidth">
          <el-input v-model="order.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址" :label-width="formLabelWidth">
          <el-input v-model="order.address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="下单时间" :label-width="formLabelWidth">
<!--          <el-input v-model="order.orderTime" autocomplete="off"></el-input>-->
          <el-date-picker
              autocomplete="off"
              v-model="order.orderTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期时间"
              style="width:896px"
          ><!--style="width:896px"-->
          </el-date-picker>
        </el-form-item>
        <el-form-item label="最后价" :label-width="formLabelWidth">
          <el-input v-model="order.amount" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitOrder">提 交</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
export default {
  name: "OrderView.vue",
  created() {
    this.loadData();
  },
  data() {
    return {
      tableData: [],
      currentPage1: 5,
      queryOrderVo: {
        currentPage: 1,
        pageSize: 10,
        orderNumber: "",
        orderDate:[],
        storeId: ''
      },
      total: 0,
      dialogTableVisible: false,
      dialogFormVisible: false,
      formLabelWidth: '120px',
      order: {
        id:"",
        number: "",
        status: "",
        userName: "",
        phone: "",
        address: "",
        orderTime: "",
        amount: "",

      },
      ids: [],
      multipleSelection: [],
      statusList: [
        {
          id: 1,
          name: '待付款'
        },
        {
          id: 2,
          name: '待派送'
        }, {
          id: 3,
          name: '已派送'
        }, {
          id: 4,
          name: '已完成'
        }, {
          id: 5,
          name: '已取消'
        }
      ],
      op: '',
      title: '修改订单',
      disable: false,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      value1: '',
      value2: ''

    }
  },

  methods: {
    dateFormat(row, column) {
      // 获取单元格数据
      let data = row[column.property];
      if (data == null) {
        return null;
      }
      let dt = new Date(data)
      return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate()
          + ' ' + dt.getHours() + ':' + dt.getMinutes() + ':' + dt.getSeconds()

    },
    resetData(){
      this.order = {
        id:"",
        number: "",
        status: "",
        userName: "",
        phone: "",
        address: "",
        orderTime: "",
        amount: "",
      }
      this.dialogFormVisible = false
    },




    //状态赋值(订单状态 1待付款，2待派送，3已派送，4已完成，5已取消)
    stateFormat(row) {
      let state = row.status;
      if (state === 1) {
        return "待付款";
      } else if (state === 2) {
        return "待派送";
      } else if (state === 3) {
        return "待收货";
      } else if (state === 4) {
        return "已派送";
      } else if (state === 5) {
        return "已取消";
      }
    },
    deleteBatch() {
      if (this.ids.length) {
        this.removeMethod()
      }
    },
    onSubmit() {
      console.log(1111)
      /*let _this = this
      this.$axios.post("/order/selectAllOfAccountByCondition", this.queryOrderVo).then(
          function (response) {
            console.log(response)
            console.log("订单", _this.tableData = response.data.data.orderList.list)
            _this.tableData = response.data.data.orderList.list
            _this.total = response.data.data.orderList.total
          }
      )*/
      this.loadData();
    },
    exportFile() {
      window.open("http://localhost:8080/svr/user/export")
    },
    uploadSuccess() {
      this.$message.success("文件上传成功")
      this.loadData()
    },
    handleSelectionChange(val) {
      console.log("val显示"+val);
      this.ids = []
      let _this = this
      val.forEach(function (order) {
        _this.ids.push(order.id);
      })
      console.log(this.ids)
      this.multipleSelection = val;
    },
    handleEdit(index, row) {
      console.log(index, row)
      this.user = row
      this.dialogFormVisible = true
      this.order = {
        number: row.number,
        status: row.status,
        userName: row.userName,
        phone: row.phone,
        address: row.address,
        orderTime: row.orderTime,
        amount: row.amount,
        id:row.id,

      }
      this.dialogFormVisible = true
      this.title = "修改信息"
      this.op = 'edit'
      this.disable = true
      // 编程式路由来进行组件跳转
      //this.$router.push({path: '/saveOrUpdate/' + row, replace: true})
    },
    handleDelete(index, row) {
      this.ids = []
      this.ids.push(row.id)
      this.removeMethod()
    },
    handleSizeChange(val) {
      this.queryOrderVo.pageSize = val
      this.loadData()
    }
    ,

    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.queryOrderVo.currentPage = val
      this.loadData()
    },
    submitOrder(){
      let path = ''
      if (this.op =='add'){
        path = "/order/add"
      }else {
        path = "/order/modifyOrder"
      }
      let _this = this
      console.log(this.order);
      this.axios.post(path, this.order).then(response => {
        console.log(response)
        if (response.data.result) {
          _this.$message.success(response.data.message);
          _this.loadData()
        } else {
          _this.$message.error(response.data.message);
        }
      })
      this.resetData()
    },
    updateOrder() {
      this.axios.post("/order/update", this.order).then(response => {

        console.log(response)
        if (response.data.result) {

          this.$message.success("更新成功");
        } else {
          this.$message.error("修改失败");
        }
      })
      this.dialogFormVisible = false
    },
    removeMethod() {
      this.$confirm('此操作将取消该订单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //删除请求发送
        this.$axios.post(
            '/order/modifyForDelete?ids=' + this.ids
        ).then((response) => {
          if (response.data.result) {
            this.$message({
              type: 'success',
              message: '订单取消成功!'
            });
            this.loadData();
          } else {
            this.$message({
              type: 'error',
              message: '订单取消失败!'
            });
          }
        }).catch((reason) => {
          this.ids=[]
          console.log(reason)
        })
        this.ids = []
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        });
      }).finally(()=>{
        this.ids = []
      });
    },
    loadData() {
      let _this = this
      this.$axios.post("/order/selectAllOfAccount", this.queryOrderVo).then(
          function (response) {
            console.log(response)
            console.log("订单", _this.tableData = response.data.data.orderList.list)
            _this.tableData = response.data.data.orderList.list
            _this.total = response.data.data.orderList.total
          }
      )
    }
    ,
  },


}
</script>

<style scoped>

</style>
